E-commerce Website UX Design Process

•

Project brief

Munster Costumes has been operating for more than 15 years and has established itself as the website of choice for costumes and fancy dress. The company is experiencing huge growth. During peak periods, such as for Halloween, Christmas and end-of-year work parties, it often struggles to keep up with demand and provide the customer service it's known for.

Munster Costumes is looking for a new e-commerce website to help it continue to grow - and to engage more closely with its customers.

My approach

I have drawn on my personal experience when looking for costumes in the design process. It's all about the customer. Using the Double Diamond process, I kept the user's experience buying costumes at the forefront of my mind.

Explore, discover and understand

Interviews

I sat down with friends and family who have purchased or are thinking about purchasing a costume and discussed their frustrations with the online experience. Examples of what I learned:
• some people like to plan for costume parties weeks in advance but others shop at the last minute
• during peak periods, many people are frustrated because websites can be slow and service can be poor.

I also contacted a local costume shop and they agreed that these are the greatest frustrations - not just for their customers but their staff too.

Competitor and competitive analysis

What are munster costumes' competitors doing well? What do they do that doesn't work? I conducted a competitive analysis on other websites to answer these questions.

Personas

To help understand customers, I created two personas: Katherine (the primary persona) and Brad. They allowed me to focus my design around what specific types of customers will need.

Created and animated using Apple Keynote.

Business needs

• To develop an e-commerce website to compliment its bricks-and-mortar store.
• To establish an online presence to connect directly to its customers.
• To increase sales.
• To expand its customer base.

Understanding user flows

With my research and the above business needs in mind, I mapped out the key user flows which informed my page designs for prototype testing. The flows take into account frequent shoppers like Katherine, who are more likely to have an account with the website; and one-off or less frequent shoppers like Brad, who are often looking for quick purchases.

Information architecture

Open card sorting

To determine the website's information architecture, I used OptimalSort's open card sorting tool online. I asked participants on there to organise 35 products into categories. This really helped me understand how the products should be categorised and labelled, as well as the design of the navigation.

Insight: Participants categorised the 35 products into seven categories. Initially, I considered 12 categories but the user testing showed seven main categories were more useful. View the results of the card sort.

Sketching

I love starting with sketches as it allows me to quickly and easily visualise designs and test the concept. Considering key navigation principles, I sketch the sitemap, navigation and user interface. I used post-it notes to demonstrate how the hover state behaves. I then tested it out with users.

Navigation menu

My initial sketches used a contextual menu approach but feedback indicated that this type of menu felt clunky to use for navigation. I decided to further analyse the results from the card sort and I noticed some categories appeared frequently in the Dendrogram (Best Merge Method) result:
• "Womens" - 100% of participants
• "Mens" - 80% of participants, with the remaining for "unisex" or "adults"
• "Kids" - 80% of participants
• "Accessories" - 60% of participants, which was then broken down into "hats", "makeups", "wigs", etc.

Insights: The information from the card sorting influenced further designs of the navigation menu and sitemap. I wanted to have a navigation menu that was flexible enough to include additions to each section, but also allowed access to main product categories. This confirmed that using a mega menu for navigation would be the best solution. I then altered the flow from the initial design to allow users to bypass the "Accessories" page and go directly to subpages.

Sitemap

The video below shows my initial design of the sitemap - and how analysing results from the card sort help produce new iterations of the sitemap's structure. It also helped determine naming conventions and improve user flow for navigation around the website.

Created and animated using Apple Keynote.

Developing design-led solutions

From sketches to Sketch

Now that I had a structure for the sitemap and navigation, I quickly jumped onto Sketch to create low-fidelity wireframes to test the navigation and validate the principles.

Rapid prototyping and user testing

User flow with wireframes

I constantly referred back to the personas because I wanted to make sure that the wireframes were still in line with the users that I'm designing the website for.

Created and animated using Apple Keynote.

Testing the navigation menu

During guerrilla testing, I observed a user clicking into the 'Hire' menu thinking they could purchase a costume there. Obviously this isn't a good user experience and I wanted to make sure this doesn't happen again. I used ChalkMark's first-click testing: participants were given a set of tasks to perform with each first click recorded and presented as a heat map overlay over the image.

Insight: Among the feedback, testing confirmed possible confusion around the 'Hire' navigation. To try to fix the problem, I changed the name to 'Hire a Costume' for further testing.

Usability testing the prototype

After validating some of my assumptions with the wireframe designs and making iterative changes, I created an interactive prototype in InVision to test the user flow and experience.

Insight: The prototype test provided great insight into user behaviour. While users found the flow easy to navigate, certain design elements were considered challenging. I include some feedback below, including a video that shows the iterative changes as a result of this feedback.

Created and animated using Apple Keynote.

Delivering the solution

Measuring success

The best way to assess results is by comparing current sales trends with those from the same period last year, as well as the conversion ratio in a three to six month period (though this could be affected by seasonal shopping habits and may not be reliable). We also need to monitor in-store customer numbers and enquiries to staff during peak periods. This should be done within three to six months of the website going live.

Summary

I have learned a lot throughout the process. I have chosen to stick with low-mid fidelity outputs, though the next steps would be to create high-fidelity prototypes while developing the design of the website further. I found it useful to add to the designs with each iteration as there are some aspects where images help provide context while testing (e.g. images of products), in addition, you could really start to see the website come alive.

User testing the prototype was really eye-opening and brought home the idea of designing for the user. Some of the designs that I had implemented and thought were fine, my users didn't feel were the case, such as the size of the utility navigation menu. I enjoyed receiving feedback and finding creative ways to solve their problems and validating my iteration.

Working with Sketch felt natural. I'm quite familiar with Illustrator and Photoshop so the learning curve wasn't that steep once I got familar with Sketch's user interface. InVision was fun to work with though I did find it frustrating that I had to create a separate design just to portray the mega menu or sliding checkout.

Feel free to view the latest iteration of the prototype.